<template>
	<view>
		<!-- 点击首页车主服务模块中的【维保历史】进入维保历史页面，页
		面顶部显示标题栏，标题栏下方显示维保历史记录条数和历史列表，
		维保历史列表项包括工单号、维保类型、维保日期、送修时间、维保
		费用和维保状态。 -->
		<view class="title">
			维保历史记录条数: {{clacCount}}
		</view>
		<view class="bigbox">
			<view class="list" v-for="(item, index) in history" :value="index" style=" border: 1px solid #CCCCCC;
			border-radius: 14rpx; overflow: hidden;">
				<view class="" style="display: flex; justify-content: space-between;
				border-bottom: 1px solid #555555; padding: 8rpx 16rpx; background-color: #007AFF; color: #EEE">
					<!-- 维保工单号 -->
					<text>{{item.gdno}}</text>
					<!-- 维保状态 -->
					<text>{{item.wbStatus}}</text>
				</view>
				<view class="" style=" padding: 8rpx 16rpx;">
					<view style="display: flex; justify-content: space-between;">
						<!-- 维保类型 -->
						<text>{{item.wbType}}</text>
						<!-- 送修时间 -->
						<text>{{item.date}}</text>
						<text>{{item.sxTime}}</text>
					</view>
					<!-- 维保费用 -->
					<view style="font-weight: bold;  display: flex; justify-content: right;">
						费用:<text style="color: #F0AD4E;">{{item.wbPrice}}</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				history: [{
					gdno: '221-514',
					wbType: "车辆维修",
					date: '2024-12-08',
					sxTime: '2024-12-04 12:23',
					wbPrice: 200,
					wbStatus: '维修中'
				}, {
					gdno: '221-514',
					wbType: "车辆维修",
					date: '2024-12-08',
					sxTime: '2024-12-04 12:23',
					wbPrice: 200,
					wbStatus: '维修中'
				}, {
					gdno: '221-514',
					wbType: "车辆维修",
					date: '2024-12-08',
					sxTime: '2024-12-04 12:23',
					wbPrice: 200,
					wbStatus: '维修中'
				}, ]
			}
		},
		computed: {
			clacCount() {
				return this.history.length
			}
		},
		methods: {

		}
	}
</script>

<style>
page{
	background-color: #F8F8F8;
}
.title{
	background-color: #def0ff;
	height: 60rpx;
	line-height: 60rpx;
	padding-left: 30rpx;
	font-weight: bold;
}
.bigbox{
	margin: 25rpx;
}
.list{
	background-color: #FFFFFF;
	margin-bottom: 30rpx;
}
</style>
